<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios 创建实例发送请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <button>王者荣耀</button>
    <button>英雄联盟</button>

    <button>获取书籍</button>
    <button>获取歌手</button>

    <script>
      //  api.xiaohigh.com/heros 王者荣耀英雄数据
      //  api.xiaohigh.com/lol   英雄联盟英雄数据

      let btns = document.querySelectorAll("button");
      //默认配置
      // axios.defaults.baseURL = 'http://127.0.0.1:3000'
      //创建实例发送请求   实例的使用方式与 axios 本身完全一致
      let xiaohigh = axios.create({
        baseURL: "http://api.xiaohigh.com",
      });

      btns[0].onclick = async function () {
        let result = await xiaohigh.get("/heros");
        console.log(result);
      };
      btns[1].onclick = async function () {
        let result = await xiaohigh({url: "/lol"});
        console.log(result);
      };

      //创建实例发送请求
      let local = axios.create({
        baseURL: "http://127.0.0.1:3000",
      });

      btns[2].onclick = async function () {
        let result = await local.get("/book");
        console.log(result);
      };

      btns[3].onclick = async function () {
        let result = await local.get("/singer");
        console.log(result);
      };
    </script>
  </body>
</html>
